{% extends "_layouts/examples.html" %}
{% block title %}Application / JAAS{% endblock %}

{% block style %}
<link rel="stylesheet" href="{{ versioned_static('build/css/standalone/patterns_icons-additional.css') }}" />
<style>
  {% include "docs/examples/layouts/application/_styles.css" %}

  /* The column showing IP should have fixed width */
  .p-table__colump--ip {
    width: 12rem;
  }

  /*
    We want the IP column to be visible when aside panel is open,
    so we calculate the panel width as:
     [100% of viewport width] - [width of the sidebar] - [width of IP column]

    Width of the screen is 100vw.

    Width of the sidebar depends on the screen size (3rem or 15rem),
    these values should be taked from variables in SASS.

    Width of the IP column is 12rem, but to give it some spacing around we will
    use 13rem. This value should be adjusted on the application level based on
    the content that needs to stay visible on the screen.
  */
  @media (min-width: 620px) {
    .l-aside.is-jaas {
      max-width: calc(100vw - 3rem - 13rem);
    }

    .l-navigation.is-pinned ~ .l-aside.is-jaas {
      max-width: calc(100vw - 15rem - 13rem);
    }
  }

  @media (min-width: 1036px) {
    .l-aside.is-jaas {
      max-width: calc(100vw - 15rem - 13rem);
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="l-application" role="presentation">
  <div class="l-navigation-bar">
    <div class="p-panel is-dark is-jaas-background">
      <div class="p-panel__header">
        <a class="p-panel__logo" href="#">
          <img class="p-panel__logo-icon" src="https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg" alt="" width="24" height="24">
          <img class="p-panel__logo-name is-fading-when-collapsed" src="https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg" alt="JAAS" height="16">
        </a>
        <div class="p-panel__controls">
          <span class="p-panel__toggle js-menu-toggle">Menu</span>
        </div>
      </div>
    </div>
  </div>

  <header class="l-navigation is-collapsed">
    <div class="l-navigation__drawer">
      <div class="p-panel is-dark is-jaas-background">
        <div class="p-panel__header">
          <a class="p-panel__logo" href="#">
            <img class="p-panel__logo-icon" src="https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg" alt="" width="24" height="24">
            <img class="p-panel__logo-name is-fading-when-collapsed" src="https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg" alt="JAAS" height="16">
          </a>
          <div class="p-panel__controls u-hide--large">
            <button class="p-button--base is-dark has-icon u-no-margin u-hide--medium js-menu-close"><i class="is-light p-icon--close"></i></button>
            <button class="p-button--base is-dark has-icon u-no-margin u-hide--small js-menu-pin"><i class="is-light p-icon--pin"></i></button>
          </div>
        </div>
        <div class="p-panel__content">
          {% include "docs/examples/patterns/side-navigation/_layout-JAAS.html" %}
        </div>
      </div>
    </div>
  </header>

  <main class="l-main">
    <div class="p-panel">
      <div class="p-panel__header">
        <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
        <div class="p-panel__controls">
          <button class="u-no-margin--bottom js-aside-open">Open aside</button>
        </div>
      </div>
      <div class="p-panel__content">
        <div class="u-fixed-width">
          <table aria-label="JAAS table example" class="p-main-table">
            <thead>
              <tr>
                <th class="p-table__cell--icon-placeholder p-table__colump--ip"><span class="p-icon status-icon is-blocked">Blocked (3)</span></th>
                <th>Owner</th>
                <th>Cloud/Region</th>
                <th>Credential</th>
                <th>Controller</th>
                <th class="u-align--right">Last Updated</th>
              </tr>
            </thead>
            <tbody>
              <tr style="background: rgba(0,0,0, 0.1)" data-test-model-uuid="2f995dee-392e-4459-8eb9-839c501590af">
                <td class="p-table__cell--icon-placeholder" data-test-column="name">
                  <div><a href="#/models/gomboli@external/hadoopspark">192.168.255.254</a></div>
                </td>
                <td class="" data-test-column="owner"><a href="#_" class="u-truncate p-link--soft">gomboli</a></td>
                <td class="" data-test-column="cloud"><a href="#_" class="u-truncate p-link--soft">google/us-east1</a></td>
                <td class="" data-test-column="credential"><a href="#_" class="u-truncate p-link--soft">Algebra-json</a></td>
                <td class="" data-test-column="controller">JAAS</td>
                <td class="u-align--right" data-test-column="updated">2020-06-17</td>
              </tr>
              <tr data-test-model-uuid="d291b9ed-1e66-4023-84fe-57130e17a0b2">
                <td class="p-table__cell--icon-placeholder" data-test-column="name">
                  <div><a href="#/models/gomboli@external/mymodel4">192.168.255.253</a></div>
                </td>
                <td class="" data-test-column="owner"><a href="#_" class="u-truncate p-link--soft">gomboli</a></td>
                <td class="" data-test-column="cloud"><a href="#_" class="u-truncate p-link--soft">google/us-central1</a></td>
                <td class="" data-test-column="credential"><a href="#_" class="u-truncate p-link--soft">clean-algebra-206308</a></td>
                <td class="" data-test-column="controller">JAAS</td>
                <td class="u-align--right" data-test-column="updated">2020-06-17</td>
              </tr>
              <tr data-test-model-uuid="5f612488-b60b-4256-814a-ba1abaa7db23">
                <td class="p-table__cell--icon-placeholder" data-test-column="name">
                  <div><a href="#/models/gomboli@external/testing">192.168.255.252</a></div>
                </td>
                <td class="" data-test-column="owner"><a href="#_" class="u-truncate p-link--soft">gomboli</a></td>
                <td class="" data-test-column="cloud"><a href="#_" class="u-truncate p-link--soft">google/europe-west1</a></td>
                <td class="" data-test-column="credential"><a href="#_" class="u-truncate p-link--soft">clean-algebra-206308</a></td>
                <td class="" data-test-column="controller">JAAS</td>
                <td class="u-align--right" data-test-column="updated">2020-06-17</td>
              </tr>
            </tbody>
          </table>
          <table aria-label="JAAS table example" class="p-main-table">
            <thead>
              <tr>
                <th class="p-table__cell--icon-placeholder p-table__colump--ip"><span class="p-icon status-icon is-alert">Alert (2)</span></th>
                <th>Owner</th>
                <th>Cloud/Region</th>
                <th>Credential</th>
                <th>Controller</th>
                <th class="u-align--right">Last Updated</th>
              </tr>
            </thead>
            <tbody>
              <tr data-test-model-uuid="e1e81a64-3385-4779-8643-05e3d5ed4523">
                <td class="p-table__cell--icon-placeholder" data-test-column="name">
                  <div><a href="#/models/gomboli@external/canonical-kubernetes">192.168.92.123</a></div>
                </td>
                <td class="" data-test-column="owner"><a href="#_" class="u-truncate p-link--soft">gomboli</a></td>
                <td class="" data-test-column="cloud"><a href="#_" class="u-truncate p-link--soft">google/us-central1</a></td>
                <td class="" data-test-column="credential"><a href="#_" class="u-truncate p-link--soft">clean-algebra-206308</a></td>
                <td class="" data-test-column="controller">JAAS</td>
                <td class="u-align--right" data-test-column="updated">2020-06-17</td>
              </tr>
              <tr data-test-model-uuid="7ffe956a-06ac-4ae9-8aac-04eba4a93da5">
                <td class="p-table__cell--icon-placeholder" data-test-column="name">
                  <div><a href="#/models/gomboli@external/mymodel">192.168.192.123</a></div>
                </td>
                <td class="" data-test-column="owner"><a href="#_" class="u-truncate p-link--soft">gomboli</a></td>
                <td class="" data-test-column="cloud"><a href="#_" class="u-truncate p-link--soft">google/us-east1</a></td>
                <td class="" data-test-column="credential"><a href="#_" class="u-truncate p-link--soft">clean-algebra-206308</a></td>
                <td class="" data-test-column="controller">JAAS</td>
                <td class="u-align--right" data-test-column="updated">2020-06-17</td>
              </tr>
            </tbody>
          </table>
          <table aria-label="JAAS table example" class="p-main-table">
            <thead>
              <tr>
                <th class="p-table__cell--icon-placeholder p-table__colump--ip"><span class="p-icon status-icon is-running">Running (3)</span></th>
                <th>Owner</th>
                <th>Cloud/Region</th>
                <th>Credential</th>
                <th>Controller</th>
                <th class="u-align--right">Last Updated</th>
              </tr>
            </thead>
            <tbody>
              <tr data-test-model-uuid="57650e3c-815f-4540-89df-81fd5d70b7ef">
                <td class="p-table__cell--icon-placeholder" data-test-column="name">
                  <div><a href="#/models/hatch@external/group-test">192.168.234.123</a></div>
                </td>
                <td class="" data-test-column="owner"><a href="#_" class="u-truncate p-link--soft">hatch</a></td>
                <td class="" data-test-column="cloud"><a href="#_" class="u-truncate p-link--soft">google/us-central1</a></td>
                <td class="" data-test-column="credential"><a href="#_" class="u-truncate p-link--soft">admin</a></td>
                <td class="" data-test-column="controller">JAAS</td>
                <td class="u-align--right" data-test-column="updated">2020-06-17</td>
              </tr>
              <tr data-test-model-uuid="e6782960-fb0b-460e-82a1-64ee03f9a39b">
                <td class="p-table__cell--icon-placeholder" data-test-column="name">
                  <div><a href="#/models/hatch@external/new-search-aggregate">123.123.123.123</a></div>
                </td>
                <td class="" data-test-column="owner"><a href="#_" class="u-truncate p-link--soft">hatch</a></td>
                <td class="" data-test-column="cloud"><a href="#_" class="u-truncate p-link--soft">google/us-central1</a></td>
                <td class="" data-test-column="credential"><a href="#_" class="u-truncate p-link--soft">jujuongce</a></td>
                <td class="" data-test-column="controller">JAAS</td>
                <td class="u-align--right" data-test-column="updated">2020-06-17</td>
              </tr>
              <tr data-test-model-uuid="930f4bb0-070a-462a-8d4e-19d9772c08f2">
                <td class="p-table__cell--icon-placeholder" data-test-column="name">
                  <div><a href="#/models/hatch@external/unplaced">192.168.12.12</a></div>
                </td>
                <td class="" data-test-column="owner"><a href="#_" class="u-truncate p-link--soft">hatch</a></td>
                <td class="" data-test-column="cloud"><a href="#_" class="u-truncate p-link--soft">google/us-central1</a></td>
                <td class="" data-test-column="credential"><a href="#_" class="u-truncate p-link--soft">juju</a></td>
                <td class="" data-test-column="controller">JAAS</td>
                <td class="u-align--right" data-test-column="updated">2020-06-17</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </main>

  <aside class="l-aside is-jaas is-wide" id="aside-panel">
    <div class="p-panel">
      <div class="p-panel__header">
        <h4 class="p-panel__title">Details for 192.168.255.254</h4>
        <div class="p-panel__controls">
          <button class="p-button--base js-aside-close u-no-margin--bottom has-icon"><i class="p-icon--close"></i></button>
        </div>
      </div>
      <div class="p-panel__content">
        <div class="u-fixed-width">
          <table aria-label="JAAS table example" class="p-main-table">
            <thead>
              <tr>
                <th>Name</th>
                <th></th>
                <th>Owner</th>
                <th class="u-hide--medium u-hide--small">Region</th>
                <th>Controller</th>
                <th class="u-align--right">Last Updated</th>
              </tr>
            </thead>
            <tbody>
              <tr data-test-model-uuid="2f995dee-392e-4459-8eb9-839c501590af">
                <td class="" data-test-column="name">
                  <div><a href="#/models/gomboli@external/hadoopspark">hadoopspark</a></div>
                </td>
                <td class="has-overflow" data-test-column="summary">
                  <div class="u-flex">
                    <div class="u-flex--block">
                      <div class="has-icon"><i class="p-icon--information"></i><span>11</span></div>
                    </div>
                    <div class="u-flex--block">
                      <div class="has-icon"><i class="p-icon--information"></i><span>10</span></div>
                    </div>
                    <div class="u-flex--block">
                      <div class="has-icon"><i class="p-icon--information"></i><span>6</span></div>
                    </div>
                  </div>
                </td>
                <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">gomboli</a></td>
                <td class="u-hide--medium u-hide--small" data-test-column="cloud"><a href="#_" class="u-truncate p-link--soft">google/us-west1</a></td>
                <td class="" data-test-column="controller">JAAS</td>
                <td class="u-align--right" data-test-column="updated">2020-06-17</td>
              </tr>
              <tr data-test-model-uuid="d291b9ed-1e66-4023-84fe-57130e17a0b2">
                <td class="" data-test-column="name">
                  <div><a href="#/models/gomboli@external/mymodel4">mymodel4</a></div>
                </td>
                <td class="has-overflow" data-test-column="summary">
                  <div class="u-flex">
                    <div class="u-flex--block">
                      <div class="has-icon"><i class="p-icon--information"></i><span>7</span></div>
                    </div>
                    <div class="u-flex--block">
                      <div class="has-icon"><i class="p-icon--information"></i><span>11</span></div>
                    </div>
                    <div class="u-flex--block">
                      <div class="has-icon"><i class="p-icon--information"></i><span>11</span></div>
                    </div>
                  </div>
                </td>
                <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">gomboli</a></td>
                <td class="u-hide--medium u-hide--small" data-test-column="cloud"><a href="#_" class="u-truncate p-link--soft">google/us-central1</a></td>
                <td class="" data-test-column="controller">JAAS</td>
                <td class="u-align--right" data-test-column="updated">2020-06-17</td>
              </tr>
              <tr data-test-model-uuid="5f612488-b60b-4256-814a-ba1abaa7db23">
                <td class="" data-test-column="name">
                  <div><a href="#/models/gomboli@external/testing">testing</a></div>
                </td>
                <td class="has-overflow" data-test-column="summary">
                  <div class="u-flex">
                    <div class="u-flex--block p-tooltip--top-center">
                      <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div>
                    </div>
                    <div class="u-flex--block p-tooltip--top-center">
                      <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div>
                    </div>
                    <div class="u-flex--block p-tooltip--top-center">
                      <div class="has-icon"><i class="p-icon--information"></i><span>4</span></div>
                    </div>
                  </div>
                </td>
                <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">gomboli</a></td>
                <td class="u-hide--medium u-hide--small" data-test-column="cloud"><a href="#_" class="u-truncate p-link--soft">google/us-east1</a></td>
                <td class="" data-test-column="controller">JAAS</td>
                <td class="u-align--right" data-test-column="updated">2020-06-17</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </aside>

  <aside class="l-status">
    <div class="p-panel demo-status">
      <div class="u-fixed-width">
        Status bar
      </div>
    </div>
  </aside>
</div>

<script>
{% include "docs/examples/layouts/application/_script.js" %}
</script>
{% endblock %}
